<!--根据数据模型简单罗列数据的组件，需输入模型与数据-->
<template>
    <div class="info-table">
        <div class="table-wrapper">
            <table class="table-info">
                <tbody>
                    <tr v-for="(infoRow,index) in infoRows" :key="index">
                        <template v-for="(item,index) in infoRow">
                            <th :span="labelSpan(item)" v-html="item.name" :key="index"></th>
                            <td :span="valueSpan(item)" v-html="item.value" :key="index"></td>
                        </template>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        model: {},
        data: {},
        option: {},
        col: {
            default: 2
        },
        //根据宽度自动计算行数，待完善
        autoCol: {}
    },
    computed: {
        infoRows() {
            if (!this.model) return []
            var fields = this.model.fields.filter((v) => {
                return v.cardpos !== 0
            }).sort((a, b) => {
                return a.cardpos - b.cardpos
            })
            var rows = [];
            var row = []
            var rowCounter = 0
            fields.forEach((field) => {
                rowCounter++
                row.push({
                    value: this.data[field.code],
                    name: field.name,
                    code: field.code
                })
                if (rowCounter === this.col) {
                    rowCounter = 0;
                    rows.push(row)
                    row = []
                }
            })
            return rows
        }
    },
    methods: {
        labelSpan(row) {
            return 1
        },
        valueSpan(row) {
            return 1
        }
    }
}
</script>
<style lang="less">
.table-info {
    width: 100%;
    th {
        font-weight: bold;
    }
    th,td{
        text-align: left;
    }
}
</style>
